<template>
	<view class="see">
		<view class="my-top">
			<image class="header" src="https://xcx.xiaombt.com/img/img/header.png" mode="" :style="{ height: navbarHeight + 'px' }">
			</image>
			<view class="nav">
				<u-navbar title="识别" :autoBack='true' bgColor="transparent" leftIconColor='#6C5D47'
					titleStyle='color:#6C5D47' placeholder>
				</u-navbar>
			</view>
		</view>
		<view class="main" :style="{ marginTop: viewHeight + 'px' }">
		<view class="img" :style="{ height: viewportHeight + 'px' }">
			<image :src="ENV.BASE_API + data.thumb" mode="" :style="{ height: viewportHeight + 'px' }"></image>
			<!-- <image src="https://xcx.xiaombt.com/img/img/矩形 30.png" mode="" :style="{ height: viewportHeight + 'px' }"></image> -->
			<view class="zhao" :style="{ height: viewportHeight + 'px' }"></view>
		</view>
		<view class="bottom">
			<view class="main-item">
				<view class="title">
					<image src="https://xcx.xiaombt.com/img/img/line.png" mode=""></image>
					<text>{{data.title || '请上传图片' }}  </text>
				</view>
				<view class="con">
					<image src="https://xcx.xiaombt.com/img/img/法案.png" mode=""></image>
					<image src="https://xcx.xiaombt.com/img/img/分享.png" mode=""></image>
				</view>
			</view>
			<view class="main-item">
				<view class="title">
					<image src="https://xcx.xiaombt.com/img/img/line.png" mode=""></image>
					<view class="a">
						<text>{{data.title || '请上传图片' }}  </text>
						<text>Cervus Nippon Temminck</text>
					</view>
					
				</view>
				
			</view>
			<view class="main-button" @click="getImage">
				上传识别
			</view>
			<view class="other">
				<view class="">
					附近药材
				</view>
				<view class="">
					附近动物
				</view>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	import {
		ENV
	} from '.env.js'
	import {
		see
	} from '@/api/index.js'
	export default {
		data() {
			return {
				base64: '',
				ENV:null,
				data:{},
				viewHeight: null,
				navbarHeight: null,
				viewportHeight:null
			}
		},
		async onLoad() {
		
		const systemInfo = uni.getSystemInfoSync(); // 获取系统信息
		    

		
			const query = uni.createSelectorQuery().in(this);
			query.select('.nav').boundingClientRect(data => {
				if (data) {
					this.navbarHeight = data.height;
				}
			}).exec();
			query.select('.my-top').boundingClientRect(data => {
				if (data) {
					this.viewHeight = data.height;
					this.viewportHeight = systemInfo.windowHeight - this.viewHeight; // 更新视口高度
				}
			}).exec();
		
		
		
		
		
		
		},
		methods:{
			getImage(){
				let that = this
				uni.chooseImage({
					count: 1, // 默认9, 设置图片的数量
					sourceType: ['camera','album',], // 可选择来源是相机
					success: (res) => {
						// 成功选择图片后的回调
						const tempFilePaths = res.tempFilePaths;
						console.log(res)
						const that = this
						uni.showLoading({
							mask: true
						})
						console.log(tempFilePaths)
						wx.getFileSystemManager().readFile({
							filePath: tempFilePaths[0], //要读取的文件的路径 (本地路径)
							encoding: "base64", //指定读取文件的字符编码，如果不传 encoding，则以 ArrayBuffer 格式读取文件的二进制内容
							success(res) {
								//转换完毕，执行上传
								// that.base64 = 'data:image/png;base64,' + res.data
								that.base64 = res.data
								see({
									url: that.base64
								}).then(res => {
									uni.hideLoading();
									console.log(res)
									that.data = res
								that.$forceUpdate();
								})
				
							
							}
						})
				
				
						// 这里可以执行上传图片等后续操作
					},
					fail: (err) => {
						// 处理错误
						console.log('Error while taking photo:', err);
					}
				});
			}
		},
		mounted() {
			this.ENV = ENV
			this.getImage()
			
		}
	}
</script>

<style lang="scss" scoped>
	.other{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: rgb(108, 93, 71);
		font-family: 思源黑体;
		font-size: 32rpx;
		font-weight: 500;
		view{
			border-bottom: 1rpx solid #6C5D47;
		}

	}
	.main-button {
		width: 100%;
		height: 96rpx;
		background-image: url('https://xcx.xiaombt.com/img/img/tijiao.png');
		background-size: 100% 100%;
		text-align: center;
		line-height: 96rpx;
		color: #fff;
		margin: 35rpx auto;
		font-size: 32rpx;
		font-weight: 550;
	}
	.main-item {
		
		margin: auto;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.title {
			display: flex;
			align-items: center;
			margin: 32rpx 0;
	
			image {
				width: 8rpx;
				height: 41rpx;
				display: inline-block;
				margin-right: 20rpx;
			}
	
			text {
				color: rgb(108, 93, 71);
				font-family: 思源黑体;
				font-size: 32rpx;
				font-weight: 500;
				display: block;
			}
		}
	
		.con {
			image{
				display: inline-block;
				width: 48rpx;
				height: 48rpx;
				margin-left: 10rpx;
			}
		}
	
		.con-text {
			width: 100%;
			background-image: url('https://xcx.xiaombt.com/img/img/detail.png');
			background-size: 100% 100%;
	
		}
	}
	.main{
		.img{
			width: 100%;
		
			position: relative;
			image{
				width: 100%;
			
			}
			.zhao{
				width: 100%;
		
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: rgba(0,0,0,.3);
			}
		}
		.bottom{
			width: 100%;
			height: 560rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #fff;
			padding: 44rpx;
			box-sizing: border-box;
			
		}
	}
	.my-top {
		width: 100%;
		background-color: #F2EFE9;
		position: fixed;
		z-index: 10000;
		top: 0;
		left: 0;
	
		.header {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
	
		.select {
			padding: 20rpx 38rpx;
			background-color: #fff;
	
			.center {
				width: 100%;
				height: 76rpx;
				position: relative;
				display: flex;
				align-items: center;
				padding: 20rpx 10rpx;
				box-sizing: border-box;
				justify-content: center;
	
				image {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
				}
			}
		}
	
	}
</style>